<template>
  <div>
    <page-main background="transparent" padding="0px">
      <div class="chunk">
        <div class="heade-option">
          <el-button type="success" size="medium" round @click="addMenu"
            >新增菜单</el-button
          >
        </div>
      </div>
      <div class="chunk">
        <el-table
          :data="handleVueRouterList"
          row-key="meta.id"
          border
          size="medium"
          :indent="16"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          >

          <el-table-column label="id" prop="id" fixed="left">
            <template slot-scope="scope">
              <span>{{ scope.row.meta.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标题" width="140" fixed="left">
            <template slot-scope="scope">
              <span>{{ scope.row.meta.title }}</span>
            </template>
          </el-table-column>

          <el-table-column label="类型" width="80" align="center">
            <template slot-scope="scope">
              <template>
                <el-tag size="small">{{
                  $dictionary.extend("MENU_TYPE", scope.row.meta.type)
                }}</el-tag>
              </template>
            </template>
          </el-table-column>

          <el-table-column label="组件文件路径" align="center" width="190">
            <template slot-scope="scope">
              <span>
                {{ scope.row.meta.component }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="图标" width="80" align="center">
            <template slot-scope="scope">
              <i
                class="overall-icon"
                style="font-size: 18px"
                :class="scope.row.meta.icon.normal"
              ></i>
            </template>
          </el-table-column>

          <el-table-column label="激活图标" width="80" align="center">
            <template slot-scope="scope">
              <i
                class="overall-icon"
                style="font-size: 18px"
                :class="scope.row.meta.icon.active"
              ></i>
            </template>
          </el-table-column>

          <el-table-column label="name" prop="name" width="180">
          </el-table-column>

          <el-table-column label="访问路由" prop="path" width="280">
          </el-table-column>

          <el-table-column label="重定向" prop="state" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.meta.redirect.redirect_state">
                <el-tag size="small" effect="dark">开启</el-tag>
              </template>
              <template v-else> - </template>
            </template>
          </el-table-column>

          <el-table-column
            label="重定向方式"
            prop="state"
            align="center"
            width="190"
          >
            <template slot-scope="scope">
              {{
                scope.row.meta.redirect.redirect_state
                  ? $dictionary.extend(
                      "MENU_REDIRECT",
                      scope.row.meta.redirect.redirect_type
                    )
                  : "-"
              }}
            </template>
          </el-table-column>

          <el-table-column
            label="重定向地址"
            prop="state"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              {{
                scope.row.meta.redirect.redirect_state
                  ? scope.row.meta.redirect.redirect_url
                  : "-"
              }}
            </template>
          </el-table-column>

          <el-table-column label="菜单栏" align="center">
            <template slot-scope="scope">
              <el-switch :value="scope.row.meta.display.navigator_show">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="面包屑" align="center">
            <template slot-scope="scope">
              <el-switch :value="scope.row.meta.display.breadcrumbs_show">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="默认展开" align="center">
            <template slot-scope="scope">
              <el-switch :value="scope.row.meta.display.childrenDevelop">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="菜单箭头" align="center">
            <template slot-scope="scope">
              <el-switch :value="scope.row.meta.display.right_arrow">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="state" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="small" effect="dark">{{
                scope.row.meta.state
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" size="small" effect="dark">{{
                scope.row.meta.state
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            fixed="right"
            width="320"
            align="center"
          >
            <template slot-scope="scope">
              <el-link
                v-if="scope.row.meta.type == 1"
                type="primary"
                size="mini"
                plain
                @click="addChildMenu(scope.row)"
                >新增子菜单</el-link>
              <el-link
                type="primary"
                size="mini"
                plain
                @click="editMenuItem(scope.row)"
                >编辑</el-link
              >
              <el-link
                type="danger"
                size="mini"
                plain
                @click="clickRemoveMenuButton(scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </page-main>
  </div>
</template>

<script>
import api from "@/assets/overall/js/api";
import { mapGetters } from "vuex";
// import pageHeader from "~/page-header/page-header.vue";
import pageMain from "~/page-main/page-main.vue";
export default {
  components: { pageMain },
  computed: {
    ...mapGetters(["handleVueRouterList"], "overall"),
  },
  mounted() {
    console.log("handleVueRouterList", this.handleVueRouterList);
  },
  data() {
    return {
      modalOpen: true,
    };
  },

  methods: {
    // 删除
    clickRemoveMenuButton(e) {
      console.log("removeMenuItem e");
      console.log(e);
      let { id } = e;
      this.removeMenuItem(id).then((result) => {
        console.log(result);
      });
    },
    removeMenuItem(id) {
      return this.$axios.post(api.mork_navigator_data, {
        active: "remove",
        data: { id },
      });
    },
    // 编辑
    editMenuItem(e) {
      console.log(e);
      console.log("点击了编辑");
    },
    // 新增
    addMenuItem(e) {
      console.log(e);
      console.log("点击了新增");
    },
    // 查看
    getMenuItem() {},
    // 新增主菜单
    addMenu() {
      this.$router.push({
        name: "menuManagementAdd",
        params: {
          mode: "addMenu",
          pid: null,
        },
      });
    },
    addChildMenu(row) {
      console.log(row);
      let id = row.meta.id;
      if (id) {
        this.$router.push({
          name: "AddMenuManagement",
          params: {
            mode: "addChildMenu",
            pid: id,
          },
        });
      }
    },
  },
};
</script>

<style>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}

.menu-header {
  height: 46px;
  background: white;
}

.heade-option {
}
.table-menu {
  height: 65px;
  box-shadow: 0px 0px 3px #c3c3c324;
  display: flex;
  align-items: center;
  padding: 0px 15px;
}
</style>
